<template>
  <div class="host">
    <div class="warpper">
      <div class="host-top">
        <div class="host-time">
          <span class="demonstration">日期时间：</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
          <span class="demonstration1">时段：</span>
          <el-time-select
            v-model="value"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
        </div>
        <div class="ceremonyType">
          <span class="ceremonyType-items">典礼类型：</span>
          <span class="ceremonyType-items">不限</span>
          <span class="ceremonyType-items">西式婚礼</span>
          <span class="ceremonyType-items">中式婚礼</span>
          <span class="ceremonyType-items">汉唐婚礼</span>
          <span class="ceremonyType-items">商务主持</span>
          <span class="ceremonyType-items">宴会主持 </span>
        </div>
        <div class="ceremonyType">
          <span class="ceremonyType-items">主持人级别:</span>
          <span class="ceremonyType-items">不限</span>
          <span class="ceremonyType-items">首席</span>
          <span class="ceremonyType-items">高端</span>
          <span class="ceremonyType-items">资深</span>
          <span class="ceremonyType-items">专用</span>
        </div>
        <div class="ceremonyType">
          <span class="ceremonyType-items">排序方式:</span>
          <span class="ceremonyType-items">不限</span>
          <span class="ceremonyType-items">价格从高到底</span>
          <span class="ceremonyType-items">价格从低到高</span>
        </div>
        <div class="ceremonyType type">
          <span class="ceremonyType-items">精准搜索:</span>
          <input v-model="input" placeholder="主持人名字(可不填)" />
          <el-button>搜索主持人</el-button>
          <el-button>清空筛选条件</el-button>
        </div>
      </div>
      <div class="host-item">
        <div class="host-list">
          <p class="host-title"><i></i> 首席主持人</p>
          <ul>
            <router-link
              tag="li"
              :to="{
                name: 'Details',
                params: {
                  id: item.id,
                  name: item.name,
                  price: item.price,
                  height: item.height,
                  weight: item.weight,
                  img: encodeURIComponent(item.img),
                  age: item.age,
                  phone: item.phone,
                  remark: item.remark,
                  introduction: item.introduction,
                },
              }"
              class="recomd-box"
              v-for="item in honourData"
              :key="item.id"
            >
              <img :src="item.img" alt="" />
              <p>
                <span>{{ item.name }}</span> <span>价格：{{ item.price }}</span>
              </p>
              <div class="star">{{ item.type }}</div>
            </router-link>
          </ul>
        </div>
        <div class="host-list">
          <p class="host-title"><i></i> 高端主持人</p>
          <ul>
            <router-link
              tag="li"
              :to="{
                name: 'Details',
                params: {
                  id: item.id,
                  name: item.name,
                  price: item.price,
                  height: item.height,
                  weight: item.weight,
                  img: encodeURIComponent(item.img),
                  age: item.age,
                  phone: item.phone,
                  remark: item.remark,
                  introduction: item.introduction,
                },
              }"
              class="recomd-box"
              v-for="item in seniorData"
              :key="item.id"
            >
              <img :src="item.img" alt="" />
              <p>
                <span>{{ item.name }}</span> <span>价格：{{ item.price }}</span>
              </p>
              <div class="star">{{ item.type }}</div>
            </router-link>
          </ul>
        </div>
        <div class="host-list">
          <p class="host-title"><i></i> 资深主持人</p>
          <ul>
            <router-link
              tag="li"
              :to="{
                name: 'Details',
                params: {
                  id: item.id,
                  name: item.name,
                  price: item.price,
                  height: item.height,
                  weight: item.weight,
                  img: encodeURIComponent(item.img),
                  age: item.age,
                  phone: item.phone,
                  remark: item.remark,
                  introduction: item.introduction,
                },
              }"
              class="recomd-box"
              v-for="item in seniorData"
              :key="item.id"
            >
              <img :src="item.img" alt="" />
              <p>
                <span>{{ item.name }}</span> <span>价格：{{ item.price }}</span>
              </p>
              <div class="star">{{ item.type }}</div>
            </router-link>
          </ul>
        </div>
        <div class="host-list">
          <p class="host-title"><i></i> 首席主持人</p>
          <ul>
            <router-link
              tag="li"
              :to="{
                name: 'Details',
                params: {
                  id: item.id,
                  name: item.name,
                  price: item.price,
                  height: item.height,
                  weight: item.weight,
                  img: encodeURIComponent(item.img),
                  age: item.age,
                  phone: item.phone,
                  remark: item.remark,
                  introduction: item.introduction,
                },
              }"
              class="recomd-box"
              v-for="item in specialtyData"
              :key="item.id"
            >
              <img :src="item.img" alt="" />
              <p>
                <span>{{ item.name }}</span> <span>价格：{{ item.price }}</span>
              </p>
              <div class="star">{{ item.type }}</div>
            </router-link>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "Host",
  data() {
    return {
      input: "",
      value1: "",
      value: "",
      specialtyData: {}, //专业主持人
      seniorData: {}, //资深主持人
      highEndData: {}, //高端主持人
      honourData: {}, //首席
    };
  },
  computed: {},
  mounted() {
    api.getRecommendation().then((res) => {
      console.log(res.data);
      if (res.status == 200) {
        let arr = res.data.list;
        let role = localStorage.getItem("wedding-role");
        if (role == "新人") {
          for (let ele of res.data.list) {
            // console.log(ele);
            ele.price = ele.price * 3;
          }
        }
        this.specialtyData = arr.filter((item, index) => {
          return item.price >= 2000 && item.price < 4000;
        });
        console.log(this.specialtyData);
        this.seniorData = arr.filter((item, index) => {
          return item.price >= 4000 && item.price < 6000;
        });

        this.highEndData = arr.filter((item, index) => {
          return item.price >= 6000 && item.price < 9000;
        });

        this.honourData = arr.filter((item, index) => {
          return item.price >= 9000;
        });
        console.log(this.honourData);
      }
    });
  },
};
</script>

<style scoped lang="less" >
.warpper {
  background: #fff;

  .host-top {
    color: #666;
    border: 1px solid orange;
    padding: 0 10px;
    .host-time {
      padding: 5px 0;
      border-bottom: 1px solid orange;
      .demonstration {
        padding-right: 30px;
      }
      .demonstration1 {
        margin-left: 50px;
      }
    }
    .ceremonyType {
      // text-align: center;
      padding: 10px 5px;
      border-bottom: 1px solid orange;
      .ceremonyType-items {
        text-align: center;
        margin-right: 50px;
        cursor: pointer;
      }
    }
    .type {
      border: 0;
      input {
        width: 300px;
        height: 40px;
        outline: none;
        margin-right: 20px;
      }
    }
  }
  .host-item {
    margin: 10px 0;
    .host-list {
      overflow: hidden;
      padding: 10px 0;
      .host-title {
        padding: 10px;
        background: orange;
        color: orangered;
        font-size: 30px;
        font-weight: 600;
        span {
          display: block;
          height: 25px;
          width: 10px;
          margin-top: 12.5px;
          margin-bottom: 12.5px;
          float: left;
          background-color: #c4b4a8;
          border-radius: 35%;
          margin-right: 10px;
          margin-left: 15px;
        }
      }
      ul {
        overflow: hidden;
        .recomd-box {
          position: relative;
          float: left;
          width: 180px;
          height: 220px;
          margin: 10px 10px;
          img {
            width: 180px;
            height: 220px;
          }
          p {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            span {
              margin-left: 20px;
            }
          }
          .star {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffa500;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-weight: 500;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>